<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    template="/WEB-INF/templates/baseLayout.xhtml">

	<ui:define name="title">
		<h:outputText value="DAMATE - #{msg['TabPanel.diagrams']}" />
	</ui:define>

    <ui:define name="diagrams">
        <style type="text/css">
            .dlayout td {
                padding-right: 30px;
            }
            .ddlayout td {
                padding-right: 20px;
                padding-bottom: 5px;
            }

            .ddlayout td:first-child {
                padding-right: 0;
            }
            .hasDatepicker {
                width: 80px !important;
            }
        </style>
        <p:panel styleClass="imgHeader">
            <f:facet name="header">
                <h:graphicImage library="images" name="user.png" />
                <h:outputText styleClass="title" value="Diagrams" />
            </f:facet>
            <h:panelGrid columns="2" styleClass="dlayout">
                <h:panelGrid columns="3" styleClass="ddlayout">
                    <h:graphicImage library="images" name="user.png" />
                    <h:outputText value="User: " />
                    <p:selectOneMenu >
                        <f:selectItem itemLabel="John Smith (johnny)" itemValue="1" />
                    </p:selectOneMenu>
                    <h:graphicImage url="http://cdn1.iconfinder.com/data/icons/gnomeicontheme/16x16/devices/gnome-dev-computer.png" />
                    <h:outputText value="Machine: " />
                    <p:selectOneMenu >
                        <f:selectItem itemLabel="188.24.70.124" itemValue="1" />
                    </p:selectOneMenu>
                    <h:graphicImage url="http://www.veryicon.com/icon/png/System/Led/database.png" />
                    <h:outputText value="Workspace: " />
                    <p:selectOneMenu >
                        <f:selectItem itemLabel="d:\UserFiles\lfazakas\workspace\" itemValue="1" />
                    </p:selectOneMenu>
                    <h:graphicImage url="http://www.flasheff.com/forum/templates/flasheff/images/folder.png" />
                    <h:outputText value="Project: " />
                    <p:selectOneMenu >
                        <f:selectItem itemLabel="damate" itemValue="1" />
                    </p:selectOneMenu>
                    <h:graphicImage url="http://svn.alfresco.com/repos/alfresco-open-mirror/alfresco/HEAD/root/projects/slingshot/source/web/components/images/generic-file-16.png" />
                    <h:outputText value="File: " />
                    <p:selectOneMenu >
                        <f:selectItem itemLabel="UserService.java" itemValue="1" />
                    </p:selectOneMenu>
                    <h:graphicImage url="http://demo.piwik.org/themes/default/images/chart_bar.png" />
                    <h:outputText value="Diagram type: " />
                    <p:selectOneMenu >
                        <f:selectItem itemLabel="Content length changing" itemValue="1" />
                    </p:selectOneMenu>
                    <h:graphicImage url="http://png.findicons.com/files/icons/2301/iphone_style_sidebar_icons/16/calendar.png" />
                    <h:outputText value="From: " />
                    <p:calendar showOn="button" />
                    <h:graphicImage url="http://png.findicons.com/files/icons/2301/iphone_style_sidebar_icons/16/calendar.png" />
                    <h:outputText value="To: " />
                    <p:calendar showOn="button" />
                </h:panelGrid>
                <p:lineChart id="category" value="#{chartBean.categoryModel}" legendPosition="e"
                     title="Content length changing" minY="0" maxY="200" style="height:300px;width:600px; margin-top:10px"/>
            </h:panelGrid>
        </p:panel>
	</ui:define>

    <ui:define name="onAfterPageLoad">
        <script type="text/javascript" language="JavaScript">
            $(document).ready(function (){
                selectTab("diagrams");
            });
        </script>
    </ui:define>
</ui:composition>
